import React, { Component } from 'react'
import { Card, Avatar, Skeleton, Switch } from 'antd'
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons'
const { Meta } = Card
export default class MyCard extends Component{
  state = {
    loading: true
  }
  changeSwitch = value => {
    this.setState({ loading: value })
  }
  render() {
    return (
      <>
        <div className='box'>
          <div className='box-header'>base</div>
          <div className='box-body'>
            <div className='box-content'>
              <Card title='this is card' extra={<a href='#'>more</a>} style={{ width: 300 }}>
                <p>card content</p>
                <p>card content</p>
                <p>card content</p>
              </Card>
            </div>
          </div>
        </div>
        <div className='box'>
          <div className='box-header'>skeleton</div>
          <div className='box-body'>
            <div className='box-title'>default skeleton</div>
            <div className='box-content'>
              <Card style={{ width: 300 }} loading={this.state.loading} actions={[<SettingOutlined key="setting" />, <EditOutlined key="edit" />, <EllipsisOutlined key="ellipsis" />]}>
                <Meta avatar={<Avatar src='https://joeschmoe.io/api/v1/random' />} title='this is card' description='description' />
              </Card>
            </div>
            <div className='box-title'>custom skeleton</div>
            <div className='box-content'>
            <Card style={{ width: 300 }} actions={[<SettingOutlined key="setting" />, <EditOutlined key="edit" />, <EllipsisOutlined key="ellipsis" />]}>
              <Skeleton loading={this.state.loading} avatar active>
                <Meta avatar={<Avatar src='https://joeschmoe.io/api/v1/random' />} title='this is card' description='description' />
              </Skeleton>
            </Card>
            </div>
          </div>
          <div className='box-footer'>
            <Switch checkedChildren='开启' unCheckedChildren='关闭' checked={this.state.loading} onChange={this.changeSwitch}></Switch>
          </div>
        </div>
      </>
    )
  }
}